<script setup>
import { ref, onMounted } from 'vue'
import { getFrontpage } from '@/apis/apis.js'
const { top, height, right } = uni.getStorageSync('menuButtonInfo')
const vaccine = ref([])
const reserve = ref([])
const popular = ref([])
const self_test = ref([])
const handleNavigateTo = (item) => {
  if (item.title === '新冠疫苗') {
    uni.navigateTo({ url: '/pages/xinguan-vaccine/xinguan-vaccine' })
  }
  if (item.title === 'HPV疫苗') {
    uni.navigateTo({ url: '/pages/hpv-vaccine/hpv-vaccine' })
  }
  if (item.title === '核酸检测') {
    uni.navigateTo({ url: '/pages/nucleic-acid/nucleic-acid' })
  }
  if (item.title === '图文咨询') {
    uni.navigateTo({ url: '/pages/graphics/graphics' })
  }
}
const handleReserve = (item) => {
  console.log(item)
  if (item.title === '健康体检') {
    uni.navigateTo({ url: '/pages/phy-exam/index' })
  }
  if (item.title === '预约挂号') {
    uni.switchTab({ url: '/pages/registered/registered' })
  }
}
const handleToTopicView = (item) => {
  uni.navigateTo({ url: `/pages/self-test/topic?name=${item.name}` })
}
const handlePopular = (item, index) => {
  uni.navigateTo({ url: `/pages/doctor/doctor?id=${item.dep_id}` })
}
onMounted(async () => {
  const res = await getFrontpage()
  vaccine.value = res.data[0].vaccine
  reserve.value = res.data[1].reserve
  popular.value = res.data[2].popular
  self_test.value = res.data[3].self_test
})
</script>

<template>
  <view class="index">
    <view class="header">
      <view class="header-status" :style="{ height: `${top}px` }"></view>
      <view class="header-title" :style="{ paddingLeft: `calc(750rpx - ${right}px)`, height: `${height}px`, lineHeight: `${height}px` }">某某省第一人民医院</view>
      <image class="header-background" src="/static/images/nav-background.png" mode="aspectFill"></image>
    </view>
    <view class="vaccine">
      <view class="vaccine-item" v-for="(item, index) in vaccine" :key="index" @click="handleNavigateTo(item)">
        <image class="vaccine-item-img" :src="item.image" mode="aspectFill"></image>
        <view class="vaccine-item-text">{{ item.title }}</view>
      </view>
    </view>
    <view class="reserve">
      <view class="reserve-item" v-for="(item, index) in reserve" :key="index" @click="handleReserve(item)">
        <view class="reserve-item-title">{{ item.title }}</view>
        <view class="reserve-item-describe">{{ item.describe }}</view>
        <image class="reserve-item-img" :src="item.image" mode="widthFix"></image>
      </view>
    </view>
    <view class="popular">
      <view class="popular-header">
        <view class="popular-header-left">热门挂号</view>
        <view class="popular-header-right">
          <view class="popular-header-right-text" @click="handleReserve({ title: '预约挂号' })">查看更多</view>
          <image class="popular-header-right-img" src="/static/images/more.svg" mode="aspectFill"></image>
        </view>
      </view>
      <view class="popular-body">
        <view class="popular-item" :style="{ backgroundColor: item.background }" v-for="(item, index) in popular" :key="index" @click="handlePopular(item, index)">
          <view class="popular-item-text">{{ item.title }}</view>
          <image class="popular-item-img" :src="item.image" mode="aspectFit"></image>
        </view>
      </view>
    </view>
    <view class="self_test">
      <view class="self_test-header">健康自测</view>
      <view class="self_test-body">
        <view class="self_test-main" v-for="(item, index) in self_test.slice(0, 1)" :key="index" @click="handleToTopicView(item)">
          <view class="self_test-main-title">{{ item.name }}</view>
          <view class="self_test-main-describe">{{ item.describe }}</view>
          <view class="self_test-main-info">
            <view class="self_test-main-info-number_of_people">{{ item.number_of_people }}</view>
            <view class="self_test-main-info-other">人测过 / {{ item.question }}题 / {{ item.minute }}分钟</view>
          </view>
          <image class="self_test-main-img" :src="item.image" mode="widthFix"></image>
        </view>
        <view class="self_test-submain">
          <view class="self_test-submain-item" v-for="(item, index) in self_test.slice(1)" :key="index" @click="handleToTopicView(item)">
            <view class="self_test-submain-title">{{ item.name }}</view>
            <view class="self_test-submain-describe">{{ item.describe }}</view>
            <view class="self_test-submain-info">
              <view class="self_test-submain-info-number_of_people">{{ item.number_of_people }}</view>
              <view class="self_test-submain-info-other">人测过 / {{ item.question }}题 / {{ item.minute }}分钟</view>
            </view>
            <image class="self_test-submain-img" :src="item.image" mode="widthFix"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="ghost" style="height: 100rpx; background-color: transparent;"></view>
  </view>
</template>

<style scoped lang="scss">
  .index {
    .header {
      position: relative;
      height: 550rpx;
      .header-title {
        color: #ffffff;
        font-weight: bold;
      }
      .header-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 750rpx;
        height: 550rpx;
        z-index: -1;
      }
    }
    .vaccine {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 40rpx 0;
      .vaccine-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .vaccine-item-img {
          margin-bottom: 20rpx;
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
    .reserve {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .reserve-item {
        position: relative;
        padding: 20rpx;
        width: 350rpx;
        height: 240rpx;
        border-radius: 20rpx;
        .reserve-item-title {
          margin-bottom: 20rpx;
          font-size: 45rpx;
        }
        .reserve-item-describe {
          color: #ffffff;
        }
        .reserve-item-img {
          position: absolute;
          bottom: 0;
          right: 30rpx;
          width: 150rpx;
        }
        &:first-child {
          background: linear-gradient(to right, rgba(109, 156, 245, 0.3), rgba(109, 156, 245, 1));
          color: rgb(0, 89, 255);
        }
        &:last-child {
          background: linear-gradient(to right, rgba(244, 196, 115, 0.3), rgba(244, 196, 115, 1));
          color: rgb(255, 162, 0);
        }
      }
    }
    .popular {
      padding: 40rpx 0;
      .popular-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40rpx;
        padding: 0 10rpx;
        .popular-header-left {
          font-weight: bold;
          font-size: 40rpx;
        }
        .popular-header-right {
          display: flex;
          align-items: center;
          .popular-header-right-text {
            font-size: 36rpx;
            font-weight: bold;
          }
          .popular-header-right-img {
            width: 50rpx;
            height: 50rpx;
          }
        }
      }
      .popular-body {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        .popular-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20rpx;
          margin-bottom: 20rpx;
          width: 230rpx;
          height: 115rpx;
          border-radius: 10rpx;
          .popular-item-text {
            font-size: 28rpx;
          }
          .popular-item-img {
            width: 50rpx;
          }
        }
      }
    }
    .self_test {
      .self_test-header {
        padding: 0 10rpx;
        margin-bottom: 20rpx;
        font-weight: bold;
        font-size: 40rpx;
      }
      .self_test-body {
        .self_test-main {
          position: relative;
          margin: 0 10rpx 20rpx;
          padding: 40rpx 20rpx;
          height: 300rpx;
          border-radius: 10rpx;
          box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
          .self_test-main-title {
            margin-bottom: 10rpx;
            font-size: 40rpx;
          }
          .self_test-main-describe {
            margin-bottom: 40rpx;
            color: #cccccc;
          }
          .self_test-main-info {
            display: flex;
            align-items: flex-end;
            .self_test-main-info-number_of_people {
              margin-right: 10rpx;
              font-size: 40rpx;
            }
            .self_test-main-info-other {
              color: #cccccc;
              font-size: 28rpx;
            }
          }
          .self_test-main-img {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 300rpx;
            border-bottom-right-radius: 10rpx;
          }
        }
        .self_test-submain {
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-wrap: wrap;
          margin: 0 10rpx;
          .self_test-submain-item {
            position: relative;
            padding: 40rpx 20rpx;
            width: 360rpx;
            height: 300rpx;
            border-radius: 10rpx;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            .self_test-submain-title {
              margin-bottom: 10rpx;
              font-size: 40rpx;
            }
            .self_test-submain-describe {
              margin-bottom: 40rpx;
              color: #cccccc;
            }
            .self_test-submain-info {
              .self_test-submain-info-number_of_people {
                font-size: 40rpx;
              }
              .self_test-submain-info-other {
                color: #cccccc;
                font-size: 28rpx;
              }
            }
            .self_test-submain-img {
              position: absolute;
              bottom: 0;
              right: 0;
              z-index: -1;
              width: 150rpx;
              border-bottom-right-radius: 10rpx;
            }
          }
        }
      }
    }
  }
</style>
